<template>
  <div class="ep-container">
    <el-form-item :label="options.label" :prop="options.name" :show-message="!isDetail" class="ep-form-item">
      <el-radio-group v-if="!isDetail" class="ep-radio-container" v-model="fieldModel" :disabled="options.disabled">
        <el-radio
          v-for="(r, i) in options.optionItems"
          :key="i"
          :label="r.value"
          :value="r.value"
          :disabled="r.disabled"
          :style="{ width: options.align ? '100%' : 'auto' }"
        >
          {{ r.label }}
        </el-radio>
      </el-radio-group>
      <div v-else class="ep-detail-content">
        {{ fieldModelText }}
      </div>
    </el-form-item>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import defaultProps from '../props'

const name = 'ep-radio'
Symbol(name)

export default defineComponent({
  name,
  props: defaultProps,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const isDetail = computed(() => props.options.permission > 0)
    const fieldModel = computed({
      get() {
        return props.modelValue as string
      },
      set(val: string) {
        emit('update:modelValue', val)
      }
    })

    const fieldModelText = computed(() => {
      if (Array.isArray(props.options.optionItems)) {
        const option = props.options.optionItems.find((x) => x.value === fieldModel.value)
        if (option) {
          return option.label
        }
      }
      return '--'
    })

    return {
      fieldModel,
      isDetail,
      fieldModelText
    }
  }
})
</script>
